<template>
  <div class="container clearfix">
    <div class="leftDir fl">
      <h4>{{type === 'common' ? '公共常用语' : '个人常用语'}}</h4>
      <directoryTree
        :title="'常用语类别'"
        :limitObj="limitObj"
        :treeLevel="2"
        :isKnowledge="false"
        @allDirectory="allDirectory"
        @nodeClick="nodeClick"
        :treeData="treeData"
        @addDirTree="addDirTree"
        @editDirTree="editDirTree"
        @delDirTree="delDirTree">
      </directoryTree>
    </div>
    <div class="fl rightContent">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
    <drawer
      :title="drawer.title"
      :drawer="drawer.isShow"
      @save="saveDirTree"
      @closeDraw="cancelDrawer"
      @cancelFun="cancelDrawer">
      <div slot="column">
        <addOrEditDirTree :isKnowledge="false" ref="dirTreeRef" :nameType="'常用语类别'"></addOrEditDirTree>
      </div>
    </drawer>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Ref, Prop } from 'vue-property-decorator'
import directoryTree from '@views/km/knowledgeBase/directoryTree.vue'
import drawer from '@/common/views/drawer/index.vue'
import addOrEditDirTree from '@/views/km/knowledgeBase/addOrEditDirTree.vue'
import { KmModule } from '@/store/modules/km/index'
import { isHasFuncOrMenus } from '@/utils/common'
@Component({
  name: 'knowledgeBase',
  components: {
    directoryTree,
    drawer,
    addOrEditDirTree
  }
})
export default class KnowledgeBase extends Vue {
  @Ref() private readonly dirTreeRef!: addOrEditDirTree
  @Prop() private type: string | undefined
  private $confirm: any
  private $router: any
  private $bus: any
  private $message: any
  private $store: any
  private drawer = {
    title: '新增常用语类别',
    isShow: false
  }

  private limitArr = []

  private limitObj: any = {
    add: true,
    edit: true,
    del: true
  }

  private treeData = []

  private saveDirTree () { // 目录弹窗保存
    this.$nextTick(() => {
      if (this.dirTreeRef) {
        const { parentId, label, level, type, _id } = this.dirTreeRef.dirTreeForm
        let sendData: any = {}
        if (type === 'edit') {
          sendData = { _id, label }
        } else {
          sendData = {
            parentId,
            level,
            label
          }
        }
        const url = `/im-km/quick-reply/action/${this.type}/category/${type === 'add' ? 'create' : 'update'}`
        const actionData = { url, method: 'POST', data: sendData }
        KmModule.KmCommonAction(actionData).then(res => {
          if (res && res.success) {
            this.$message.success(`${type === 'add' ? '添加' : '修改'}常用语类别成功`)
            this.drawer.isShow = false
            this.dirTreeRef.setDirTreeData()
            this.getTreeData()
          }
        })
      }
    })
  }

  private cancelDrawer () { // 目录弹窗取消
    this.drawer.isShow = false
    this.$nextTick(() => {
      if (this.dirTreeRef) {
        this.dirTreeRef.setDirTreeData()
      }
    })
  }

  private nodeClick (obj: any) {
    this.$router.push(`/knowledge_mgt/index/${this.type === 'common' ? 'common_language' : 'personal_language'}/${obj.node._id}`)
    window.setTimeout(() => {
      this.$bus.$emit('directoryClick', obj)
    }, 50)
  }

  private allDirectory () {
    this.$router.push(`/knowledge_mgt/index/${this.type === 'common' ? 'common_language' : 'personal_language'}/all`)
    window.setTimeout(() => {
      this.$bus.$emit('directoryClick')
    }, 50)
  }

  private addDirTree (row: any) { // 添加目录弹窗
    this.drawer.title = '新增常用语类别'
    row.type = 'add'
    this.drawer.isShow = true
    this.$nextTick(() => {
      if (this.dirTreeRef) {
        this.dirTreeRef.setDirTreeData(row)
      }
    })
  }

  private editDirTree (row: any) { // 修改目录
    this.drawer.title = '编辑常用语类别'
    this.drawer.isShow = true
    row.type = 'edit'
    this.$nextTick(() => {
      if (this.dirTreeRef) {
        this.dirTreeRef.setDirTreeData(row)
      }
    })
  }

  private delDirTree (row: any) { // 删除目录
    const { _id } = row
    this.$confirm('删除常用语类别成功后，该常用语类别成功下所有常用语均会被删除, 是否继续?', '常用语类别删除', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      if (row.children && row.children.length > 0) {
        this.$message.error('该常用语类别下仍有子常用语类别，删除失败')
      } else {
        const actionData = { url: `/im-km/quick-reply/action/${this.type}/category/delete`, method: 'POST', data: { _id } }
        KmModule.KmCommonAction(actionData).then(res => {
          if (res && res.success) {
            this.$message({ type: 'success', message: '常用语类别成功!' })
            this.$router.push(`/knowledge_mgt/index/${this.type === 'common' ? 'common_language' : 'personal_language'}`)
            this.getTreeData()
          }
        })
      }
    }).catch(() => {
      this.$message({ type: 'info', message: '已取消删除' })
    })
  }

  private getTreeData () {
    const url = `/im-km/quick-reply/action/${this.type}/category/list`
    const actionData = { url, method: 'POST', data: { isQuickQuery: false } }
    KmModule.KmCommonAction(actionData).then(res => {
      if (res && res.success) {
        this.treeData = res.data.tree || []
      }
    })
  }

  private activated () {
    this.getTreeData()
    switch (this.type) {
      case 'common':
        this.limitObj.add = 'add_category'
        this.limitObj.edit = 'edit_category'
        this.limitObj.del = 'delete_category'
        break
      case 'agent':
        this.limitObj.add = 'add_personal_category'
        this.limitObj.edit = 'edit_personal_category'
        this.limitObj.del = 'delete_personal_category'
        break
    }
    for (const i in this.limitObj) {
      if (isHasFuncOrMenus(this.limitObj[i], this.limitArr, false)) {
        this.limitObj[i] = true
      } else {
        this.limitObj[i] = false
      }
    }
  }

  private mounted () {
    this.limitArr = this.$store.state.common.session.user // 权限处理
  }
}
</script>
<style lang="stylus" scoped>
@import '~@/common/style/common.styl'
.container
  height 100%
  border-radius 10px
  height 100%
  border 1px solid #ecf0f3
  box-shadow 0px 0px 4px 0px #e0e6f0, 0px 1px 4px 0px #e0e6f0
  box-sizing border-box
  margin 0 2px 2px 0
  .leftDir
    padding 16px 0px 16px 16px
    width 220px
    overflow auto
    height 100%
    border-right 1px solid $border-main
    h4
      font-weight 600
  .rightContent
    padding 16px 16px 16px 0px
    width calc(100% - 240px)
    margin-left 20px
    height 100%
    padding-left 5px
</style>
